<template>
	<div class="">
		<div class="container">
			<div class="title">项目动态</div>
			<h2 class="tcent" v-if="list.length ==0">暂时没有数据</h2>
			<div class="list" v-else>
				<div class="msgli" v-for="item in list" @click="goproject(item.xmId)">
					<div class="li_left">{{item.pic}}</div>
					<div class="li_right">
						<div class="li_right_top">
							<div class="li_l">
								<div class="li_name">{{item.name}}</div>
								<div class="li_title">{{item.operteTypeName}}</div>
								<div class="li_name now">{{item.xmName}}</div>
							</div>
							<div class="li_r">{{item.createTime}}</div>
						</div>
						<div class="li_right_bto">{{item.remark}}</div>

					</div>
				</div>
			</div>
			<div class="page_box">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="page" :page-sizes="[10, 30, 60, 100]" :page-size="limit"
					layout="total, sizes, prev, pager, next, jumper" :total="inglen">
				</el-pagination>
			</div>

		</div>

		<xminfo :id="id" :showinfo="showinfo" @show="show(e)"></xminfo>
		<div class="loading-content" v-if="showloading">
			<div class="loading-spinner">
				<svg viewBox="25 25 50 50" class="circular">
					<circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
				</svg>
			</div>
			<div class="loading-text">加载中...</div>
		</div>
	</div>
</template>

<script>
	import xminfo from '../../../components/projectinfo.vue'
	export default {
		name: "",
		data() {
			return {
				id: '',
				page: 1,
				list: [],
				inglen: 0,
				limit: 10,
				info: {},
				showinfo: false,
				showloading: false,

			}
		},
		components: {
			xminfo
		},
		created() {
			this.$http.defaults.headers["Authorization"] = sessionStorage.getItem('token')
			this.token = sessionStorage.getItem('token')
		},
		mounted() {
			this.getlist();

		},
		watch: {

		},
		beforeRouteEnter(to, from, next) { //路由导航钩子，通过页面路由标记是否需要清空页面数据重新加载
			to.meta['fromPath'] = from.path;
			to.meta['needFresh'] = false;
			next();
		},
		activated() {

		},
		methods: {
			show(e) {
				console.log(e)
				this.showinfo = e
				this.getlist()
			},
			goproject(id) {
				if(this.$permissions.indexOf(166)  == -1){
					return
				}
				this.id = id;
				this.showinfo = true;
			},
			handleSizeChange(val) {
				this.limit = val
				this.getlist()
			},
			handleCurrentChange(val) {
				this.page = val
				this.getlist()
			},
			getlist() {
				this.showloading = true
				var that = this
				var param = {
					page: this.page,
					limit: this.limit,
					userId: sessionStorage.getItem('uid'),
					// rwId: this.id
				}
				this.$http.post(this.$url + '/xx/xmDynamic', this.$qs.stringify(param))
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.list = response.data.data
						var reg = /^[a-zA-Z]+$/;
						for (var i = 0; i < that.list.length; i++) {
							// console.log(!reg.test(that.list[i].name))
							if (!reg.test(that.list[i].name)) {
								that.list[i].pic = that.list[i].name.substring(that.list[i].name
									.length - 2)
							}else{
								that.list[i].pic = that.list[i].name
							}
						}
						that.inglen = response.data.count
						that.showloading = false
					})
					.catch(function(error) {
						that.$Toast('网络拥堵，刷新一下');
					});
			},
		}
	}
</script>

<style scoped>
	/deep/ .el-pagination .btn-prev {
		border: 1px solid #ccc;
		padding: 0;
		border-right: none;
		min-width: 33px;
		height: 33px;
		padding-top: 2px;
	}

	/deep/ .el-pagination .btn-next {
		border: 1px solid #ccc;
		padding: 0;
		border-left: none;
		min-width: 33px;
		height: 33px;
		padding-top: 2px;
	}

	/deep/ .el-pager li {
		border: 1px solid #ccc;
		padding: 0;
		border-right: none;
		min-width: 33px;
		height: 33px;
		line-height: 33px;
	}

	/deep/ .el-pager li:nth-last-of-type(1) {
		border-right: 1px solid #ccc;
	}

	/deep/ .el-pager li.active {
		border: #4286f5 1px solid;
		background: #4286f5;
		color: #fff;
	}

	.li_right_bto {
		color: #333;
		line-height: 24px;
	}

	.li_right_mod {
		color: #999;
		/* margin-bottom: 5px; */
	}

	.li_r {
		color: #333;
	}

	.li_right {
		width: calc(100% - 73px);
		font-size: 14px;
		line-height: 24px;
	}

	.now {
		width: 70%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.li_title {
		/* width: 0%; */
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: #4286F5;
		margin-right: 30px;
	}

	.li_l {
		display: flex;
		width: 80%;
	}

	.li_right_top {
		display: flex;
		width: 100%;
		/* margin-bottom: 5px; */
		justify-content: space-between;
	}

	.li_name {

		color: #000;
		margin-right: 30px;

	}

	.li_left {
		width: 55px;
		height: 55px;
		background: #4286F5;
		border-radius: 100%;
		font-size: 16px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #FFFFFF;
		margin-right: 13px;
		display: block;
		text-align: center;
		line-height: 55px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.msgli {
		display: flex;
		align-items: center;
		box-shadow: 0px 0px 14px 0px #eeeeee;
		padding: 20px;
		box-sizing: border-box;
		margin-bottom: 10px;
		cursor: pointer;
	}

	.list {
		padding: 20px;
		height: calc(100vh - 250px);
		overflow-y: auto;
		overflow-x: hidden;
	}

	.title {
		font-size: 24px;
		color: #000000;
	}
</style>
